<template>
  <a-spin :loading="loading" tip="使劲啊...">
    <div ref="div"></div>
  </a-spin>
</template>
<script setup lang="ts">
import '@/utils/vditor/zh_CN.js'
import '@/utils/vditor/ant.js'
import '@/utils/vditor/index.css'
import '@/utils/vditor/ant-design.css'
import '@/utils/vditor/light.css'
import '@/utils/vditor/lute.min.js'
import '@/utils/vditor/katex@0.16.11.min.js'
import { computed, onMounted, onUpdated, ref } from 'vue'
import Vditor from 'vditor'
import commonApi from '@/api/commonApi.js'

const vditorId = computed (() => {
  let icon
  return '/src/assets/icons/' + icon
})
const loading = ref (true)
const div = ref<HTMLDivElement> ()
const toolbar = [
  'emoji',
  'headings',
  'bold',
  'italic',
  'strike',
  'link',
  '|',
  'list',
  'ordered-list',
  'check',
  'outdent',
  'indent',
  '|',
  'quote',
  'line',
  'code',
  'inline-code',
  'insert-before',
  'insert-after',
  '|',
  // "upload",
  // "record",
  'table',
  '|',
  'undo',
  'redo',
  '|',
  'fullscreen',
  'edit-mode',
]

let editor: Vditor
const init = (id: string, height: string, content: any) => {
  editor = new Vditor (div.value!, {
    height: 'calc(100vh-26px)',
    minHeight: 300,
    width: '100vw',
    _lutePath: '../src/utils/vditor/lute.min.js',
    debugger: true,
    cdn: '/',
    toolbar: toolbar,
    toolbarConfig: {
      pin: true,
    },
    cache: {
      enable: false,
    },
    icon: 'ant',
    theme: 'classic',
    mode: 'wysiwyg',
    i18n: window.VditorI18n,
    preview: {
      maxWidth: 4096,
      theme: {
        current: 'ant-design',
        path: 'src/utils/vditor',
      },
    },
    // lang:'zh_CN',
    after: () => {
      loading.value = false
      // editor.vditor.lute = Lute.New()
      commonApi.readFile (content).then ((result) => {
        // console.log(result);
        editor.setValue (result)
      })
    },
  })
  return editor
}

const props = defineProps ([ 'height', 'uid', 'file' ])
onMounted (() => {
  console.log ('customVditor props', props)
  init (props.uid, 'auto', props.file.fullPath)
})
onUpdated (() => {
  // editor.release
  // treeHeight.value = props.height;
})

const clear = function () {
  editor.destroy ()
}
</script>
<style scoped lang="less"></style>
